<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="test.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../addons/anytime/anytime_css.css" />
<!-- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> -->
<script src="../addons/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="../addons/jquery-ui-1.8.18.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="../addons/jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="../addons/jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="../addons/jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script src="../addons/anytime/anytime.js"></script>

<script>
$(function() {
	$( "[id^='date']" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
	$( "[id^='time']" ).AnyTime_picker({
		format: "%I:%i %p"
	});
});
</script>

<title>Insert title here</title>

</head>
<body>	
	<div class="tab-title">
		<div class="main">Create a New</div>
	</div>
	<div class="tab-project">
		<div class="main">Project</div>
		<div class="sub">This<br>is<br>a test.</div>
	</div>
	<div class="tab-class">
		<div class="main">Class</div>
		<div class="sub">
			Name: <input type="text" name="event_name" size="50"/>
			<br>
			<table border="0">
				<tr>
					<td>Start Time:	<input type="text" name="time_1" id="time_1" size="15"/></td>
					<td>Start Date: <input type="text" name="date_1" id="date_1" size="15"/></td>
				</tr>
				<tr>
					<td>End Time: <input type="text" name="time_2" id="time_2" size="15"/></td>
					<td>End Date: <input type="text" name="date_2" id="date_2" size="15"/></td>
				</tr>
			</table>
			<input type="checkbox" name="recurrance" />M <input type="checkbox" name="recurrance" />T <input type="checkbox" name="recurrance" />W 
			<input type="checkbox" name="recurrance" />Th <input type="checkbox" name="recurrance" />F <input type="checkbox" name="recurrance" />Sat 
			<input type="checkbox" name="recurrance" />Sun
		</div>
	</div>
	<div class="tab-exam">
		<div class="main">Exam</div>
		<div class="sub">This<br>is<br>a test.</div>
	</div>
	<div class="tab-extra">
		<div class="main">Extracurricular</div>
		<div class="sub">This<br>is<br>a test.</div>
	</div>
    <script>
    //Add condition so that clicking text elements do not trigger event as well.
    $(document).ready(function(){
    	$(":input").click(function(e){
    		e.stopPropagation();
    	});
    	
   		$("[class^='tab-']").click(function() {
   			if($(this).children(".sub").is(":hidden")) {
   				$(this).children(".sub").slideDown("slow");
   			}
   			else {
   				$(this).children(".sub").slideUp("slow");
   			}
   		});
	});      
    </script>
</body>
</html>